<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
        :close-on-click-modal="isReadOnly">
        <template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">审批意见</div>
            </div>
        </template>
        <template #default>
            <el-container class="zs-drawer-container">
                <el-scrollbar class="zs-drawer-content">
                    <div class="zs-card zs-space-bottom zs-layout-flex-col cur-card">
                        <hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
                            :cloumns="tableData.cloumns" @pageChange="pageChange" :isHavePage="false">
                        </hsPageTable>
                    </div>
                </el-scrollbar>
            </el-container>
        </template>
        <!-- 详情抽屉 footer可以不要 根据实际需求定 -->
        <template #footer>
            <div>
                <el-button class="zs-btn-md zs-btn-primary" @click="cancelClick()">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { carParkApproveInfoApi } from '@/api/Manage/Business/detailPages'
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
let store = useStore()
const curDrawerSize = ref(store.state.uiDrawerSizeBig)

let tableData = reactive({
    loading: false,
    total: 0,
    data: [],
    cloumns: [
        { prop: "fdFactNodeName", label: "审批人角色", minWidth: '80', align: "left" },
        { prop: "fdName", label: "审批人", minWidth: '80', align: "left" },
        { prop: "fdActionInfo", label: "审批状态", minWidth: '80', align: "left" },
        { prop: "fdAuditNote", label: "审批意见", minWidth: '100', align: "left" },
        { prop: "fd_create_time", label: "审批时间", minWidth: '120', align: "center" },
    ]
})

const props = defineProps({
    isShow: { type: Boolean, default: false },
    selectItem: Object,
    projectCode: String,
    isReadOnly: { type: Boolean, default: false },
})

const emit = defineEmits(['close'])
const isShowDrawer = ref(props.isShow)

// 关闭drawer
const handleClose = (done) => {
    emit('close', { isShow: false })
    done()
}

function cancelClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false })
}


// 获取详情
const getDetail = async () => {
    await carParkApproveInfoApi({
        projectCode: props.projectCode,
        fid: props.selectItem.fid,
    }).then((res) => {
        if (res.data.errorCode == 200) {
            tableData.data = res.data.data
        }
    })
}

getDetail()

</script>

<style scoped lang="scss">
.cur-card {
    height: calc(100vh - 220px);
}
</style>
